<template>
	<view>
		<!-- 部门详情 -->
		<view class="details-content">
			<view class="name-item">
				<text class="u-font-32">{{details.department}}</text>
				<view class="u-p-t-10"><text class="u-tips-color u-font-24">所属地区：{{details.city.cityname}}</text></view>
				<view class="u-p-t-10">
					<text class="u-tips-color u-font-24" v-if="details.user">绑定用户：{{details.user.name}}({{details.user.mobile}})</text>
					<text class="u-tips-color u-font-24" v-else>绑定用户：未绑定</text>
				</view>
			</view>
			<view class="data-item u-p-t-20">
				<u-grid :col="2">
					<u-grid-item>
						<text class="u-tips-color u-font-24">账户余额</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.balance}}<text class="u-font-24">元</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">账户积分</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.integral}}<text class="u-font-24">分</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">累计提现</text>
						<view class="grid-text u-p-t-10 u-font-28">{{Math.abs(details.cashout)}}<text class="u-font-24">元</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">订单总数</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.ordercount}}<text class="u-font-24">条</text></view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="u-p-30">
			<view class="" v-if="details.user">
				<u-button type="error" form-type="submit" @click="unbinding">解绑部门负责人</u-button>
			</view>
			<view class="" v-else>
				<u-button type="primary" @click="show = true">选择部门负责人</u-button>
			</view>
		</view>
		<!-- 搜索用户 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" z-index="9998" length="80%">
			<view class="u-p-30">
				<u-search placeholder="搜索用户" v-model="key" @change="searchUser" @search="searchUser"></u-search>
			</view>
			<u-cell-group>
				<u-cell-item 
					v-for="(item,index) in userlist" 
					:key="index" 
					:title="item.name"
					@click="bindUser(item.id)">
				</u-cell-item>
			</u-cell-group>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				// 部门详情
				details:{
					city:{},
					cashout: 0
				},
				show: false,
				key: '',
				userlist: []
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetails()
		},
		methods: {
			// 搜索用户
			searchUser(){
				this.$u.post('/Select/UserList', {
					"pageIndex": 1,
					"pageSize": 10,
					"key": this.key
				}).then((res) => {
					console.log('搜索用户:',res)
					this.userlist = res.rows
				}).catch(()=>{
					
				})
			},
			// 部门详情
			getDetails(){
				this.$u.get('/Enterprise/Detail?id='+this.id).then((res)=>{
					console.log('部门详情:',res)
					this.details = res
				})
			},
			// 绑定用户
			bindUser(uid){
				uni.showModal({
					title: '确定绑定该用户吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$u.post('/Enterprise/Bind', {
								userId: uid,
								id: this.id
							}).then((res) => {
								uni.showToast({
									title: '绑定成功',
									icon: 'none'
								})
								this.getDetails()
								this.show = false
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 解除绑定
			unbinding() {
				uni.showModal({
					// title: '提示',
					content: '您确定要解绑部门负责人吗',
					success: (res)=> {
						if (res.confirm) {
							this.$u.post('/Enterprise/UnBind',[this.id]).then((res) => {
								uni.showToast({
									title: '解除绑定成功',
									icon: 'none'
								})
								this.getDetails()
								// this.getOrderRecord(this.id)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.details-content{
		background-color: #fff;
		padding: 30rpx;
		box-shadow: $u-color-border-shadow;
	}
	.list {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.text{
			font-size: 24rpx;
			margin: 20rpx 0 0 0;
			line-height: 40rpx;
		}
	}
</style>
